<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>Connectome</title>
  <link rel="stylesheet" href="light.css" />
</head>

<body>
  <noscript>
    <strong>niivue doesn't work properly without JavaScript enabled. Please enable
      it to continue.</strong>
  </noscript>
  <header>
    <label for="invertCheck">Invert</label>
    <input type="checkbox" id="invertCheck" unchecked />
    <label for="edgeSlider">Edge</label>
    <input type="range" min="5" max="30" value="10" class="slider" id="edgeSlider" />
    <label for="nodeSlider">Node</label>
    <input type="range" min="5" max="80" value="30" class="slider" id="nodeSlider" />
    <label for="threshSlider">Threshold</label>
    <input type="range" min="1" max="59" value="20" class="slider" id="threshSlider" />
    <label for="lineSlider">Legend Lines</label>
    <input type="range" min="0" max="12" value="3" class="slider" id="lineSlider" />
    <button id="reset">reset</button>
    <button id="loadTab">load tabular</button>
    <button id="loadSparse">load sparse</button>
    <button id="loadFreeSurfer">load FreeSurfer</button>
    <button id="loadTab2">load tabular via mesh</button>
    <button id="loadSparse2">load sparse via mesh</button>
    <button id="loadFreeSurfer2">load FreeSurfer via mesh</button>
  </header>
  <main id="container">
    <canvas id="gl1"></canvas>
  </main>
  <footer>
    <label id="shaders"></label>
  </footer>
</body>

</html>
<script type="module" async>
  import * as niivue from "../dist/index.js"
  invertCheck.onchange = function () {
    nv1.setMeshProperty(nv1.meshes[0].id, "colormapInvert", this.checked)
    nv1.updateGLVolume()
  }
  // Update the current slider value (each time you drag the slider handle)
  edgeSlider.oninput = function () {
    nv1.setMeshProperty(nv1.meshes[0].id, "edgeScale", this.value * 0.1)
  }
  nodeSlider.oninput = function () {
    nv1.setMeshProperty(nv1.meshes[0].id, "nodeScale", this.value * 0.1)
  }
  threshSlider.oninput = function () {
    nv1.setMeshProperty(nv1.meshes[0].id, "edgeMin", this.value * 0.1)
  }
  lineSlider.oninput = function () {
    nv1.setMeshProperty(nv1.meshes[0].id, "legendLineThickness", this.value)
    nv1.updateGLVolume()
  }
  let connectome = {
    name: "simpleConnectome",
    nodeColormap: "warm",
    nodeColormapNegative: "winter",
    nodeMinColor: 2,
    nodeMaxColor: 4,
    nodeScale: 3, //scale factor for node, e.g. if 2 and a node has size 3, a 6mm ball is drawn
    edgeColormap: "warm",
    edgeColormapNegative: "winter",
    edgeMin: 2,
    edgeMax: 6,
    edgeScale: 1,
    legendLineThickness: 3,
    nodes: [
      {
        name: "RF",
        x: 40,
        y: 40,
        z: 30,
        colorValue: 2,
        sizeValue: 2
      },
      {
        name: "LF",
        x: -40,
        y: 40,
        z: 20,
        colorValue: 2,
        sizeValue: 2
      },
      {
        name: "RP",
        x: 40,
        y: -40,
        z: 50,
        colorValue: 3,
        sizeValue: 3
      },
      {
        name: "LP",
        x: -40,
        y: -40,
        z: 50,
        colorValue: 4,
        sizeValue: 4
      }
    ],
    edges: [{
      first: 0,
      second: 1,
      colorValue: 2
    },
    {
      first: 0, 
      second: 2,
      colorValue: -3
    },
    {
      first: 0,
      second: 3,
      colorValue: 4
    },
    {
      first: 1,
      second: 3,
      colorValue: 6
    }],
  }   //connectome{}
  var volumeList1 = [
    // first item is background image
    {
      url: "../images/mni152.nii.gz", //"./images/RAS.nii.gz", "./images/spm152.nii.gz",
      colormap: "gray",
    },
  ]
  let opts = {
    show3Dcrosshair: true,
    isColorbar: true,
    backColor: [0.8, 0.8, 1, 1],
    sliceType: niivue.SLICE_TYPE.RENDER,
  }
  var nv1 = new niivue.Niivue(opts)
  await nv1.attachTo("gl1")
  await nv1.loadVolumes(volumeList1)
  nv1.volumes[0].colorbarVisible = false
  await nv1.loadConnectome(connectome)
  nv1.setClipPlane([-0.1, 270, 0])
  let cmaps = nv1.meshShaderNames()
  let cmapEl = document.getElementById("shaders")
  for (let i = 0; i < cmaps.length; i++) {
    let btn = document.createElement("button")
    btn.innerHTML = cmaps[i]
    btn.onclick = function (e) {
      let id = nv1.meshes[0].id
      if (e.shiftKey) id = nv1.meshes[1].id
      nv1.setMeshShader(id, cmaps[i])
    }
    cmapEl.appendChild(btn)
  }
  reset.onclick = function () {
    nv1.setDefaults(opts, true)
    nv1.setClipPlane([-0.1, 270, 0])
  }
  function removeOpenMeshes() {
    if (nv1.meshes.length > 0) {
      let mesh = nv1.meshes[0]
      nv1.removeMesh(mesh)
    }
  }
  loadTab.onclick = function () {
    removeOpenMeshes()
    nv1.loadConnectomeFromUrl("../images/connectome.jcon")
  }
  loadSparse.onclick = function () {
    removeOpenMeshes()
    nv1.loadConnectomeFromUrl("../images/connectome2.jcon")
  }
  loadFreeSurfer.onclick = function () {
    removeOpenMeshes()
    nv1.loadFreeSurferConnectomeFromUrl("../images/FreeSurferControlPoints.json");
  }
  loadTab2.onclick = function () {
    removeOpenMeshes()
    nv1.loadMeshes([{ url: "../images/connectome.jcon" }])
  }
  loadSparse2.onclick = function () {
    removeOpenMeshes()
    nv1.loadMeshes([{ url: "../images/connectome2.jcon" }])
  }
  loadFreeSurfer2.onclick = function () {
    removeOpenMeshes()
    nv1.loadMeshes([{ url: "../images/FreeSurferControlPoints.json" }])
  }
</script>